<template>
	<div class="alarmConfiguration">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe738;</i>
				告警管理/
				<span>告警配置管理</span>
			</div>
		</div>
		<div class="right_main">
			<div class="divider2"></div>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline" :inline="true">
				<div class="import">
					<el-form-item label="监控ID：" prop="addId" >
						<el-input v-model="ruleForm.addId"></el-input>
					</el-form-item>
					<el-form-item label="选择工程："   prop="addGameName">
						<el-select v-model="ruleForm.addGameName" filterable  placeholder="请搜索或选择游戏" @change="gameChange">
							<el-option v-for="(val,key) in games" :label="val.projectName" :value="val.id" :key="key"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="监控描述：" prop="addMoniDesc" >
						<el-input v-model="ruleForm.addMoniDesc"></el-input>
					</el-form-item>
					<el-form-item label="监控阈值：" prop="addMoniThres" >
						<el-input v-model="ruleForm.addMoniThres"></el-input>
					</el-form-item>
					<el-form-item label="开始日期：" prop="addStartDate" >
						<el-date-picker v-model="ruleForm.addStartDate" type="datetime" placeholder="选择日期时间" @change="changeDate1"></el-date-picker>
					</el-form-item>
					<el-form-item label="结束日期：" prop="addEndDate" >
						<el-date-picker v-model="ruleForm.addEndDate" type="datetime" placeholder="选择日期时间"  @change="changeDate2"></el-date-picker>
					</el-form-item>
					<el-form-item label="监控频率（分钟）：" prop="addMoniFreq" >
						<el-input v-model="ruleForm.addMoniFreq"></el-input>
					</el-form-item>
					<el-form-item label="监控次数：" prop="addMoniNumb" >
						<el-input v-model="ruleForm.addMoniNumb"></el-input>
					</el-form-item>
					<el-form-item label="监控产出说明：" prop="addMoniOut" >
						<el-input v-model="ruleForm.addMoniOut"></el-input>
					</el-form-item>
					<el-form-item label="监控组别：" prop="addMoniGroup" >
						<el-select v-model="ruleForm.addMoniGroup" placeholder="请选择" @change="groupChange">
							<el-option v-for="item in options" :key="item.value" :label="item.groupName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="监控语句：" prop="addMoniState" >
						<el-input type="textarea" :rows="4" cols="40" v-model="ruleForm.addMoniState"></el-input>
					</el-form-item>
				</div>
				<el-form-item class="conmit">
					<el-button type="primary" @click="findForm('ruleForm')" icon="search">立即查询</el-button>
					<el-button type="primary" @click="addForm('ruleForm')" icon="plus">立即添加</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
					<br>
					<span class="warning">（输入搜索条件，留空搜索全部！）</span>
				</el-form-item>
			</el-form>
			<div class="table">
				<div class="divider2"></div>
				<el-button type="primary" @click="startAll()">开始所有任务</el-button>
				<el-button type="primary" @click="pauseAll()">暂停所有任务</el-button>
				<el-button type="primary" @click="restAll()">恢复所有任务</el-button>
				<div class="block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="pageSizes"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="dataTotal"></el-pagination>
				</div>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column v-for="(val,key) in tableHeader" :prop="val.prop" :label="val.label" :key="key" align="center" width="180"></el-table-column>
					<el-table-column label="操作" align="center" width="230" fixed="right">
						<template scope="scope">
							<el-button type="primary" size="small" @click="edit(scope.$index, scope.row)">修改</el-button>
							<el-button v-show="scope.row.show1" @click="pauseCur(scope.$index, scope.row)">暂停</el-button>
							<el-button v-show="scope.row.show2" @click="restCur(scope.$index, scope.row)">恢复</el-button>
							<el-button @click="handleDelete(scope.$index, scope.row)" v-show="scope.row.show3">停止</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="revampForm" v-show="revampShow">
				<div class="revampChoose">
					<div class="vicp-close"  @click="revampShow=false"> <i class="el-icon-close vicp-icon4"></i>
					</div>
					<el-form :model="revampForm"  ref="revampForm" label-width="115px" class="demo-ruleForm">
						<h5>修改告警配置管理</h5>
						<el-form-item label="监控ID：" prop="addId" >
							<el-input v-model="revampForm.addId" disabled></el-input>
						</el-form-item>
						<el-form-item label="工程名称：" prop="addGameName">
							<el-select v-model="revampForm.addGameName" filterable  placeholder="请搜索或选择游戏" @change="gameChange2">
								<el-option v-for="(val,key) in games" :label="val.projectName" :value="val.id" :key="key"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="监控语句：" prop="addMoniState">
							<el-input type="textarea" :rows="4" cols="40" v-model="revampForm.addMoniState"></el-input>
						</el-form-item>
						<el-form-item label="监控描述：" prop="addMoniDesc">
							<el-input v-model="revampForm.addMoniDesc"></el-input>
						</el-form-item>
						<el-form-item label="监控阈值：" prop="addMoniThres">
							<el-input v-model="revampForm.addMoniThres"></el-input>
						</el-form-item>
						<el-form-item label="开始日期：" prop="addStartDate">
							<el-date-picker v-model="revampForm.addStartDate" type="datetime" placeholder="选择日期时间" @change="changeDate1"></el-date-picker>
						</el-form-item>
						<el-form-item label="结束日期：" prop="addEndDate">
							<el-date-picker v-model="revampForm.addEndDate" type="datetime" placeholder="选择日期时间"  @change="changeDate1"></el-date-picker>
						</el-form-item>
						<el-form-item label="监控频率（分钟）：" prop="addMoniFreq">
							<el-input v-model="revampForm.addMoniFreq"></el-input>
						</el-form-item>
						<el-form-item label="监控次数：" prop="addMoniNumb">
							<el-input v-model="revampForm.addMoniNumb"></el-input>
						</el-form-item>
						<el-form-item label="监控产出说明：" prop="addMoniOut">
							<el-input v-model="revampForm.addMoniOut"></el-input>
						</el-form-item>
						<el-form-item label="监控组别：" prop="addMoniGroup">
							<el-select v-model="revampForm.addMoniGroup" placeholder="请选择" @change="groupChange2">
								<el-option v-for="item in options" :key="item.value" :label="item.groupName" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item style="margin-left: 240px !important;margin-top: 40px">
							<el-button type="primary" @click="revampComit('revampForm')">立即修改</el-button>
							<el-button @click="resetForm('revampForm')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>
<script src="./alarmConfiguration.js"></script>
<style lang="stylus" rel="stylesheet/stylus" src="./alarmConfiguration.styl"></style>